{%  extends "base.html" %}

{% block site_name %}用户界面{% endblock %}
{% block header %}用户模式{% endblock %}
{% block left_body %}
        <ul class="nav flex-column nav-pills">
            <li class="nav-item">
                <a  class="nav-link active" href="/">转到主界面</a>
            </li>
          <li class="nav-item">
            <a class="nav-link" href="/user/">回到用户界面</a>
        </ul>
{% endblock %}

{% block right_body %}
<h3 class="text-success text-center">
    修改密码页面
</h3>

<form role="form" action="/user/change-password/" method="post">
    <div class="form-group">
        <label for="old">
            旧密码
        </label>
        <input type="password" class="form-control" name="old" />
    </div>
    <div class="form-group">

        <label for="new">
            新密码
        </label>
        <input id='pw' type="password" class="form-control" name="new" />
    </div>
    <div class="form-group">

        <label for="new2">
            新密码再输入一遍
        </label>
        <input id='repw' type="password" class="form-control" name="new2" onkeyup="checkpassword()"/>
        <!--onkeyup="checkpassword()"使得可以调用检验-->
    </div>
    <label id="info">
    </label>
        <div class="form-group">

        <label for="date">
            YYYY-MM-DD形式输入注册日期（因为这个如果自动日期，不便测试）
        </label>
        <input type="date" class="form-control" name="date" />
    </div>
    <div class="form-group">
    <button type="submit" id='submit' class="btn btn-primary">
        点此更改密码
    </button>
    </div>
</form>
<script type="text/javascript">
    	function checkpassword() {
    		var password = document.getElementById("pw").value;
    		var repassword = document.getElementById("repw").value;

    		if(password == repassword) {
    			 document.getElementById("info").innerHTML="<br><font color='green'>两次密码输入一致</font>";
    			 document.getElementById("submit").disabled = false;

			 }else {
				 document.getElementById("info").innerHTML="<br><font color='red'>两次输入密码不一致!</font>";
	    		 document.getElementById("submit").disabled = true;
			 }
    	}
</script>

{% if error %}
<h3 class="text-danger text-center">您修改失败，旧密码不正确</h3>
{% endif %}

{% endblock %}
